<template>
	<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
		@select="handleSelect">
		<!-- 左上角医院Logo和系统名称 -->
		<el-menu-item index="0" style="background: transparent; display: flex; align-items: center;">
			<HospitalLogo />
			<span class="system-title">DimensView医院系统</span>
		</el-menu-item>
		<!-- 右上角用户交互区域 -->
		<div class="user-menu">
			<!-- 头像点击弹出菜单 -->
			<el-dropdown trigger="click">
				<span class="el-dropdown-link">
					<el-avatar :src="avatarUrl" size="large" @click.stop="openAvatarDialog" style="cursor:pointer" />
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item @click="showInfo = true">个人信息</el-dropdown-item>
						<el-dropdown-item @click="showPwd = true">修改密码</el-dropdown-item>
						<el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
		<!-- 修改头像弹窗 -->
		<el-dialog title="修改头像" v-model="showAvatarDialog" width="320px">
			<input type="file" accept="image/*" @change="onAvatarChange" />
			<div v-if="avatarPreview" style="margin-top:16px;text-align:center;">
				<el-avatar :src="avatarPreview" size="large" />
			</div>
			<template #footer>
				<el-button @click="showAvatarDialog = false">取消</el-button>
				<el-button type="primary" @click="saveAvatar">保存</el-button>
			</template>
		</el-dialog>
		<!-- 个人信息弹窗 -->
		<el-dialog title="个人信息" v-model="showInfo" width="350px">
			<el-descriptions :column="1" border>
				<el-descriptions-item label="用户名">123</el-descriptions-item>
				<el-descriptions-item label="角色">管理员</el-descriptions-item>
			</el-descriptions>
			<template #footer>
				<el-button @click="showInfo = false">关闭</el-button>
			</template>
		</el-dialog>
		<!-- 修改密码弹窗 -->
		<el-dialog title="修改密码" v-model="showPwd" width="350px">
			<el-form :model="pwdForm" label-width="80px">
				<el-form-item label="原密码"><el-input v-model="pwdForm.old" type="password" /></el-form-item>
				<el-form-item label="新密码"><el-input v-model="pwdForm.new" type="password" /></el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="showPwd = false">取消</el-button>
				<el-button type="primary" @click="changePwd">保存</el-button>
			</template>
		</el-dialog>
	</el-menu>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { ElMessage } from 'element-plus'
	import HospitalLogo from './HospitalLogo.vue' // 医院Logo组件

	const router = useRouter()
	const activeIndex = ref('1')

	// 头像相关
	const avatarUrl = ref(localStorage.getItem('avatarUrl') || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
	const showAvatarDialog = ref(false)
	const avatarPreview = ref('')
	function openAvatarDialog() {
		showAvatarDialog.value = true
		avatarPreview.value = ''
	}
	function onAvatarChange(e) {
		const file = e.target.files[0]
		if (!file) return
		const reader = new FileReader()
		reader.onload = (ev) => {
			const result = ev.target && typeof ev.target.result === 'string' ? ev.target.result : ''
			avatarPreview.value = result
		}
		reader.readAsDataURL(file)
	}
	function saveAvatar() {
		if (avatarPreview.value) {
			avatarUrl.value = avatarPreview.value
			localStorage.setItem('avatarUrl', avatarPreview.value)
			ElMessage.success('头像修改成功')
			showAvatarDialog.value = false
		} else {
			ElMessage.error('请先选择图片')
		}
	}

	// 用户交互弹窗
	const showInfo = ref(false)
	const showPwd = ref(false)
	const pwdForm = ref({ old: '', new: '' })
	function changePwd() {
		if (!pwdForm.value.old || !pwdForm.value.new) {
			ElMessage.error('请填写完整')
			return
		}
		ElMessage.success('密码修改成功（前端模拟）')
		showPwd.value = false
		pwdForm.value = { old: '', new: '' }
	}
	// 退出登录
	function logout() {
		localStorage.removeItem('isLogin')
		router.push('/login')
	}

	const handleSelect = (key : string, keyPath : string[]) => {
		console.log(key, keyPath)
	}
</script>

<style scoped>
	.el-menu--horizontal>.el-menu-item:nth-child(1) {
		margin-right: auto;
	}
	.system-title {
		margin-left: 16px;
		font-size: 22px;
		font-weight: 600;
		color: #1976d2;
		letter-spacing: 1px;
		font-family: 'Microsoft YaHei', 'Arial', sans-serif;
	}
	.user-menu {
		position: absolute;
		right: 32px;
		top: 0;
		height: 64px;
		display: flex;
		align-items: center;
	}
</style>